{
	template:`
	<a-page-header title="图标列表" sub-title="管理图标">
		<template #extra>
		<a-popover placement="leftTop" :open="loadShow">
			<a-upload :show-upload-list="false" accept="image/jpg,image/jpeg,image/png" v-model:file-list="fileList" @change="uploadChange" :multiple="true" :action="'action/manage/iconInfo/upload?business='+business">
				<a-button type="primary">上传</a-button>
			</a-upload>
			<template #content>
				<div v-for="item in fileList">
					{{item.name}}
					<a-progress :percent="item.percent" />
				</div>
			</template>
		</a-popover>
			<m-back @click="back(false);">关闭</m-back>
		</template>
		<a-card :hoverable="true" :bodyStyle="{padding:'20px'}">
		    <a-row :gutter="30" style="margin-bottom:10px;">
		        <a-col :span="4">
		            <a-radio-group v-model:value="business" button-style="solid" @change="initLoadImage">
                        <a-radio-button value="A">系统</a-radio-button>
                        <a-radio-button value="B">业务</a-radio-button>
                    </a-radio-group>
		        </a-col>
		        <a-col :span="14">
			        <a-alert message="图标上传后不可删除" type="warning" style="margin-top:-4px;"></a-alert>
		        </a-col>
		        <a-col :span="6">
		            <a-input-search v-model:value="name" placeholder="搜索名称" enter-button :allowClear="true" @search="initLoadImage"/>
		        </a-col>
		    </a-row>
			<a-list :grid="{ gutter: 6, column: 12 }" :data-source="list">
				<template #renderItem="{ item }">
					<div style="padding:2px;">
						<img :src="item.path" style="width:100%;"/>
						<div style="font-size:9px;line-height:1;">{{item.name}}</div>
					</div>
				</template>
			</a-list>
			<a-button v-if="has" type="link" block @click="loadImage()">...加载更多...</a-button>
		</a-card>
	</a-page-header>
	`,
	props: ['localeZh','param','parentVue'],
	data:function(){
		return {
		    name:'',
		    business:'B',
			fileList:[],
			list:[],
			load:false,
			index:0,
			has:true,
			pageNum:48,
			loadShow:false,
			loadTimer:null,
		};
	},
	mounted(){
		this.initLoadImage();
	},
	methods:{
	    initLoadImage:function(){
            this.list=[];
            this.load=false;
            this.index=0;
            this.has=true;
            this.loadImage();
	    },
		uploadChange:function(obj){
			if(obj.file.status=="done"){
				var json=JSON.parse(obj.file.xhr.response);
				this.list.unshift(json.model);
				this.index++;
			}
			if(obj.fileList.length){
				var b=false;
				for(var i=0;i<obj.fileList.length;i++){
					if(obj.fileList[i].status!='done'){
						b=true;
					}
				}
				if(b){
					this.loadShow=b;
				}else{
					if(null!=this.loadTimer) clearTimeout(this.loadTimer);
					this.loadTimer=setTimeout(()=>{
						this.loadShow=b;
						this.fileList=[];
					},1500);
				}
			}
		},
		loadImage:function(){
			this.load=true;
			this.requestData("action/manage/iconInfo/iconList",
				{"page":{"index":this.index,"num":this.pageNum},"name":this.name,"business":this.business},
				function(data){
					for(var i=0;i<data.list.length;i++){
						this.list.push(data.list[i]);
					}
					this.has=data.code==0&&data.list.length>=this.pageNum;
					this.index+=data.list.length;
					this.load=false;
				}.bind(this)
			);
		},
	}
}